<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="main"/>
  <script type="text/javascript" src="${createLinkTo(dir: 'js/jquery', file: 'jquery-1.3.2.min.js')}"></script>
  <link rel="stylesheet" href="${createLinkTo(dir: 'facebox', file: 'facebox.css')}"/>
  <script type="text/javascript" src="${createLinkTo(dir: 'facebox', file: 'facebox.js')}"></script>

  <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'popupList.css')}"/>

  <g:javascript>
    $(function() {
      $('a[rel*=facebox]').facebox({
        loading_image : '${createLinkTo(dir: 'facebox', file: 'loading.gif')}',
        close_image   : '${createLinkTo(dir: 'facebox', file: 'closelabel.gif')}'
      });

      $(".stagePopup").click(function() {
          $(this).addClass('focous');
          var stagePos = $(this).position();
          var stageTopOffset = 0;
          var stageLeftOffset = 0;
          $("#stageList").css("top",stagePos.top+stageTopOffset);
          $("#stageList").css("left",stagePos.left+stageLeftOffset);
          displayStage();
      });

      $(".preHeader").load("${createLink(controller: 'stage', action: 'stage')}")
      .end().find(".header").load("${createLink(controller: 'stage', action: 'month', id:'S0')}");

    })


    function displayStage() {
        $("#stageList .content")
        .html("<div style='text-align:center;padding:20px 0;color:#999999'><img src='${createLinkTo(dir: 'images', file: 'ajax-loader.gif')}' style='padding-bottom:5px'><br/>正在加载...</div>")
        .load("${createLink(controller: 'stage', action: 'week')}" + "/" +$("#stageList .header .selectedItem").attr("id"));
        $("#stageList").hide();
        $("#stageList").show();
    }
    
    function updateStageMonth(cid) {
        if (cid!="" && cid!=undefined) {
            var popupList = $(".popupList:visible").attr("id");
            //clear content html first
            $("#"+popupList+" .content").html("<div style='text-align:center;padding:20px 0;color:#999999'><img src='${createLinkTo(dir: 'images', file: 'ajax-loader.gif')}' style='padding-bottom:5px'><br/>正在加载...</div>");
            //update selecteItem
            $("#"+popupList+" .preHeader .selected").removeClass("selected")
            .end().find("#"+popupList+" .preHeader #"+cid).addClass("selected");
            $("#"+popupList+" .header")
            .load("${createLink(controller: 'stage', action: 'month')}" + "/" +cid,{},function() {
                    updateStageWeek($("#"+popupList+" .header li:first").attr("id"));
            });
        }
    }

    function updateStageWeek(pid) {
        if (pid!="" && pid!=undefined) {
            //update selectedItem
            $("#stageList .header .selectedItem").removeClass("selectedItem").end().find("#stageList .header #"+pid).addClass("selectedItem");

            if (pid=="") {
                pid=1;	//set default to handle unexpected case
            }
            $("#stageList .content")
            .html("<div style='text-align:center;padding:20px 0;color:#999999'><img src='${createLinkTo(dir: 'images', file: 'ajax-loader.gif')}' style='padding-bottom:5px'><br/>正在加载...</div>")
            .load("${createLink(controller: 'stage', action: 'week')}" + "/" +pid);
        } else {
            //clear the content
            $("#stageList .content").html("<div style='font-style:normal;color:#666666;padding:20px;text-align:center'>no school</div>");
        }
    }

    function fillStage(s) {
        var rid = $(".focous").attr('id')
        $.get("${createLink(controller:'entry',action:'ajaxstage')}",{stage:s, id:rid}, function(data) {
            if (data=="-1") {
            } else {
                $("#" + rid).html(data);
            }
        });
        $(".focous").removeClass("focous")
        $("#stageList").hide();
    }
    
  </g:javascript>
  
  <title>Catalog List</title>
</head>
<body>
  <div id="stageList" class="popupList hidden">
    <div class="preHeader"></div>

    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"><input type="button" value="关闭窗口" class="btnGrey" style="padding:3px 5px;margin:3px 0 8px 0" onClick="$('#stageList').hide()"></div>
  </div>

<div class="nav">
  <span class="menuButton"><a class="home" href="${createLinkTo(dir: '')}">Home</a></span>
  <span class="menuButton"><g:link class="create" action="create">New Catalog</g:link></span>
  <span class="menuButton"><g:link class="create" controller="entry" action="create" params="['catalog.id':catalogInstance?.id]">New Entry</g:link></span>
</div>
<div class="body">
  <h1>Catalog List</h1>
  <h3>
    Parent Catalog:
    <g:if test="${catalogInstance?.parent}">
      <g:link action="list" id="${catalogInstance?.parent.id}">${catalogInstance.name}</g:link>
    </g:if>
    <g:else>
      <g:link action="list">Root</g:link>
    </g:else>
  </h3>
  <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
  </g:if>
  <div class="list">
    <table>
      <thead>
      <tr>

        <g:sortableColumn property="id" title="Id"/>

        <g:sortableColumn property="name" title="Name"/>

        <g:sortableColumn property="description" title="Description"/>

        <g:sortableColumn property="stage" title="Stage"/>

        <g:sortableColumn property="displayPosition" title="Display Position"/>

        <g:sortableColumn property="imgUrl" title="Img Url"/>

        <th>Parent</th>

        <g:sortableColumn property="dateCreated" title="Date Created"/>

      </tr>
      </thead>
      <tbody>
      <g:each in="${catalogInstanceList}" status="i" var="catalogInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">

          <td><g:link action="show" id="${catalogInstance.id}">${fieldValue(bean: catalogInstance, field: 'id')}</g:link></td>

          <td><g:link action="list" id="${catalogInstance.id}">${fieldValue(bean: catalogInstance, field: 'name')}</g:link></td>

          <td>${fieldValue(bean: catalogInstance, field: 'description')}</td>

          <td>${fieldValue(bean: catalogInstance, field: 'stage')}</td>

          <td>${fieldValue(bean: catalogInstance, field: 'displayPosition')}</td>

          <td>${fieldValue(bean: catalogInstance, field: 'imgUrl')}</td>

          <td>${fieldValue(bean: catalogInstance, field: 'parent')}</td>

          <td>${fieldValue(bean: catalogInstance, field: 'dateCreated')}</td>

        </tr>
      </g:each>
      </tbody>
    </table>
  </div>
  <g:if test="${entryInstanceList}">
    <h1>Entry List</h1>
    <div class="list">
      <table>
        <thead>
        <tr>

          <g:sortableColumn property="id" title="Id"/>

          <th>title</th>

          <g:sortableColumn property="content" title="Content"/>

          <g:sortableColumn property="tagNames" title="Tag Names"/>

          <g:sortableColumn property="stage" title="Stage"/>

          <g:sortableColumn property="source" title="Source"/>

          <th>Catalog</th>

        </tr>
        </thead>
        <tbody>
        <g:each in="${entryInstanceList}" status="i" var="entryInstance">
          <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">

            <td><g:link controller="entry" action="show" id="${entryInstance.id}">${fieldValue(bean: entryInstance, field: 'id')}</g:link></td>

            <td><a href="${createLink(controller:'entry',action:'preview', id:entryInstance.id)}" rel="facebox">${fieldValue(bean: entryInstance, field: 'title')}</a></td>

            <td><cms:shortContent content="${entryInstance.content}"/></td>

            <td>${fieldValue(bean: entryInstance, field: 'tagNames')}</td>

            <td class="stagePopup" id="${entryInstance.id}">${fieldValue(bean: entryInstance, field: 'stage')}</td>

            <td>${fieldValue(bean: entryInstance, field: 'source')}</td>

            <td>${entryInstance.catalog.name}</td>

          </tr>
        </g:each>
        </tbody>
      </table>
    </div>
    <div class="paginateButtons">
      <g:paginate total="${entryInstanceTotal}" id="${catalogInstance.id}"/>
    </div>
  </g:if>
</div>
</body>
</html>
